{% extends '../../common/layouts/accLayout.tpl' %}
{% block content %}
	<div class="ui-ucenter-right ui-box">
		<div>
			{#<div class="ui-box-chead">
				<h3 class="ui-box-chead-title">资金流水记录</h3>
			</div>#}
            <div class="breadcrumb">
                <ul>
                    <li><span>资金记录</span></li>
                </ul>
            </div>
            <div class="ui-body bg-white ">

                <div id="search_box" class="fundsOpts">
                    <form class="layui-form" action="">
                        <ul class="fundsDates fn-clear">
                            <li class="liOne">
                                <span>时间范围：</span>
                            </li>
                            <li id="btntimes" class="mr20">
                                <a class="ibtn" data-type="1" class="layui-btn" lay-submit lay-filter="search_btn">1个月</a>
                                <a class="ibtn" data-type="3" class="layui-btn" lay-submit lay-filter="search_btn">3个月</a>
                                <a class="ibtn" data-type="6" class="layui-btn" lay-submit lay-filter="search_btn">6个月</a>
                            </li>
                            <li class="liDate">
                                <input type="hidden" id="funds_type" name="funds_type"/>
                                <input type="hidden" id="month" name="month"/>
                                <div class="layui-input-inline">
                                    从
                                </div>
                                <div class="layui-input-inline">
                                    <input class="layui-input" id="start_t" name="start_t" placeholder="" type="text" value="" >
                                </div>
                                <div class="layui-input-inline">
                                    到
                                </div>
                                <div class="layui-input-inline">
                                    <input class="layui-input" id="end_t" name="end_t" placeholder="" type="text" value="" >
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn" lay-submit lay-filter="search_btn">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">清空</button>
                                </div>
                            </li>
                        </ul>
                        <ul class="fundsType fn-clear mt10">
                            <li class="liOne">
                                <span>资金类型：</span>
                            </li>
                            <li id="btntypes">
                                <a class="ibtn" data-type="0" class="layui-btn" lay-submit lay-filter="search_btn">全部</a>
                                <a class="ibtn" data-type="1" class="layui-btn" lay-submit lay-filter="search_btn">投资</a>
                                <a class="ibtn" data-type="3" class="layui-btn" lay-submit lay-filter="search_btn">利息</a>
                                <a class="ibtn" data-type="4" class="layui-btn" lay-submit lay-filter="search_btn">佣金</a>
                                <a class="ibtn" data-type="2" class="layui-btn" lay-submit lay-filter="search_btn">提现</a>
                                <a class="ibtn" data-type="5" class="layui-btn" lay-submit lay-filter="search_btn">提现退回</a>
                            </li>
                        </ul>
                    </form>
                </div>
                <div class="tableList" style="margin-bottom:0px;">
                    <table class="layui-hide" id="table" lay-skin="line"></table>
                </div>
            </div>
		</div>
	</div>
{% endblock %}
{% block css_assets %}
    <style type="text/css">
    .fundsType .ibtn {
    width: 56px;
    }
    </style>
{% endblock %}
{% block js_assets %}
	<script>

        //切换显示 时间范围
        $("#btntimes .ibtn").click(function(){
           $(this).siblings().removeClass('on').end().addClass('on');
         $("#month").val($(this).attr('data-type'));
        });

        //切换显示 资金类型
        $("#btntypes .ibtn").click(function(){
            $(this).siblings().removeClass('on').end().addClass('on');
            $("#funds_type").val($(this).attr('data-type'));
        });

        var  tableIns;
        layui.use(['form','laydate','table','element'], function() {
            var laydate = layui.laydate;
            var form = layui.form;
            var table = layui.table;

            laydate.render({
                elem: '#start_t'
                , type: 'date'
            });
            laydate.render({
                elem: '#end_t'
                , type: 'date'
                ,done: function(value, date, endDate){
                    //日期选择完成，清空 1/3/6月
                    $("#btntimes .ibtn").siblings().removeClass('on');
                    $("#month").val('');
                }
            });

            tableIns = table.render({
                elem: '#table'
                ,url:'/myAccount/fundRecord/list'
                ,method:'POST'
                ,page:true
                ,cols: [[
                    {field:'change_time',  title: '资金变动时间'}
                    ,{field:'fund_type', title: '资金类型'}
                    ,{field:'difference', title: '收支金额（元）',templet:function(d){
                        if(d.difference){
                            return d.difference / 100;
                        }else{
                            return 0;
                        }
                        }}
                    ,{field:'to', title: '资产余额（元）',templet:function(d){
                            if(d.to){
                                return d.to / 100;
                            }else{
                                return 0;
                            }
                        }}

                ]],
                response: {
                    statusName: 'status' //数据状态的字段名称，默认：code
                    , statusCode: 200 //成功的状态码，默认：0
                    , msgName: 'msg' //状态信息的字段名称，默认：msg
                    , countName: 'count' //数据总数的字段名称，默认：count
                    , dataName: 'datas' //数据列表的字段名称，默认：data
                }
            });

            form.on('submit(search_btn)',function(data){
                search(data.field);
                return false;
            });

            function search(search_form_data) {
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        start_time: search_form_data.start_t,
                        end_time: search_form_data.end_t,
                        funds_type: search_form_data.funds_type,
                        month:search_form_data.month
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

        });
        function resetForm(){
            $("#btntimes .ibtn").siblings().removeClass('on');
            $("#btntypes .ibtn").siblings().removeClass('on');
            $("#month").val('');
            $("#funds_type").val('');
            $("#start_t").val('');
            $("#end_t").val('');
            tableIns.reload();
            return false;
        }
	</script>

{% endblock %}